<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-button type="primary" @click="clickAddCategories">添加分类</el-button>
      <template>
        <tree-table
          border
          :data="categoriesList"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          show-index
        >
          <template slot="status" slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.cat_deleted === false"
              style="color:lightgreen"
            ></i>
            <i class="el-icon-error" style="color:red" v-else></i>
          </template>

          <template slot="level" slot-scope="scope">
            <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag type="warning" v-else>三级</el-tag>
          </template>

          <template slot="opt" slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editCate(scope.row)"
            ></el-button>

            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteCate(scope.row)"
            ></el-button>
          </template>
        </tree-table>
      </template>

      <div class="block">
        <el-pagination
          @size-change="handel1"
          @current-change="handel2"
          :current-page="pageInfo.pagenum"
          :page-sizes="[3, 4, 5, 10]"
          :page-size="pageInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="添加分类"
      :visible.sync="addCategoriesVisible"
      width="50%"
      @close="resetForm"
    >
      <el-form
        ref="addCategoriesRef"
        :model="addCategoriesForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCategoriesForm.cat_name"></el-input>
        </el-form-item>

        <el-form-item label="父级分类">
          <el-cascader
            v-model="CascaderValue"
            :options="CascaderList"
            :props="CascaderProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCategoriesVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改分类"
      :visible.sync="editCategoriesVisible"
      width="50%"
      @close="editCategoriesForm.cat_name = ''"
    >
      <span>分类名称:<el-input placeholder="请输入内容" v-model="editCategoriesForm.cat_name" clearable> </el-input></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCategoriesVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickEditCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      addCategoriesForm: {
        cat_name: "",
        cat_level: 0,
        cat_pid: 0,
      },
      editCategoriesForm: {
        cat_name: "",
        cat_id:0
      },
      rules: {
        cat_name: [
          { required: true, message: "请输入新分类名称", trigger: "blur" },
        ],
      },
      CascaderValue: [],
      CascaderProps: {
        label: "cat_name",
        children: "children",
        value: "cat_id",
        expandTrigger: "hover",
        // checkStrictly:true
      },
      total: 5,
      addCategoriesVisible: false,
      editCategoriesVisible: false,
      categoriesList: [],
      CascaderList: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "status",
        },
        {
          label: "排序",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
    };
  },
  created() {
    this.getCategories();
  },
  methods: {
    async getCategories() {
      const { data: res } = await this.$http.get("categories", {
        params: this.pageInfo,
      });
      if (res.meta.status !== 200) {
        this.$message.error("获取商品分类失败");
      } else {
        this.categoriesList = res.data.result;
        this.total = res.data.total;
      }

      //   console.log(res);
    },
    //改变每页数据条数时
    handel1(newPageSize) {
      //   console.log(newPageSize);
      this.pageInfo.pagesize = newPageSize;
      this.getCategories();
    },

    //改变当前页数时
    handel2(newPage) {
      //   console.log(newPage);
      this.pageInfo.pagenum = newPage;
      this.getCategories();
    },

    //点击添加分类按钮
    async clickAddCategories() {
      const { data: res } = await this.$http.get("categories", {
        params: {
          type: 2,
        },
      });
      this.CascaderList = res.data;
      console.log(res);

      this.addCategoriesVisible = true;
    },

    //当级联菜单切换
    handleChange(newValue) {
      console.log(newValue);
    },

    //点击确定增加分类
    addCate() {
      this.$refs.addCategoriesRef.validate(async (valid) => {
        if (!valid) {
          return this.$message.error("表单验证失败");
        }
        this.addCategoriesForm.cat_pid = this.CascaderValue[
          this.CascaderValue.length - 1
        ];
        this.addCategoriesForm.cat_level = this.CascaderValue.length;

        const { data: res } = await this.$http.post(
          "categories",
          this.addCategoriesForm
        );
        if (res.meta.status !== 201) {
          this.$message.error("添加分类请求失败");
        } else {
          this.getCategories();
          this.addCategoriesVisible = false;
        }
      });
    },

    //关闭分类按钮重置数据
    resetForm() {
      this.addCategoriesForm.cat_pid = 0;
      this.addCategoriesForm.cat_name = "";
      this.addCategoriesForm.cat_level = 0;
      this.CascaderValue = [];
    },

    //点击修改分类
    editCate(data) {
      // console.log(data);
      this.editCategoriesForm.cat_id = data.cat_id
      this.editCategoriesVisible = true;
    },

    //点击删除分类
    async deleteCate(data) {
      const flag = await this.$confirm(
        "此操作将永久删除该分类, 是否继续?",
        "删除分类",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      if (flag == "confirm") {
        const { data: res } = await this.$http.delete(
          "categories/" + data.cat_id
        );
        if (res.meta.status !== 200) {
          this.$message.error("删除分类失败");
        } else {
          this.getCategories();
          this.$message.success("删除分类成功");
        }
      }
    },

    //点击确定修改分类名称
   async clickEditCate(){
     const {data:res} = await this.$http.put('categories/'+this.editCategoriesForm.cat_id,{
       cat_name:this.editCategoriesForm.cat_name
     })

     if(res.meta.status !== 200){
       this.$message.error('修改用户分类名称失败')
     }else{
       this.$message.success('修改用户分类成功')
       this.getCategories()
       this.editCategoriesVisible = false;
       
     }

    }
  },
};
</script>

<style scoped>
.zk-table {
  margin-top: 20px;
}
</style>
